import { motion } from "framer-motion";

export const Intro = () => {
  return (
    <div className="w-full h-full flex flex-col items-center justify-center text-center">
      <motion.h1
        className="text-5xl font-bold mb-6"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
      >
        欢迎来到我的个人简历
      </motion.h1>
      <motion.p
        className="text-xl text-gray-600 max-w-2xl"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.3, duration: 0.8 }}
      >
        我是一名充满激情的前端开发工程师，专注于创建优秀的用户体验和高性能的Web应用
      </motion.p>
      <motion.div
        className="mt-8"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.6, duration: 0.8 }}
      >
        <button className="bg-blue-500 text-white px-6 py-3 rounded-full hover:bg-blue-600 transition-colors">
          了解更多
        </button>
      </motion.div>
    </div>
  );
};